<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
import geoJson2 from './yongjiaxian.json'
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      this.$echarts.registerMap('永嘉县2', geoJson2)
      const option = {
        backgroundColor: '#4f5555',
        visualMap: {
          show: false,
          min: 0,
          max: 1,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true,
          inRange: {
            color: ['#FF2600', '#7AC29A']
          },
          textStyle: {
            color: '#ffffff'
          }
        },
        series: [
          {
            type: 'map',
            map: '永嘉县2',
            zlevel: 0,
            itemStyle: {
              normal: {
                areaColor: '#323c48',
                borderColor: '#111'
              },
              emphasis: {
                areaColor: '#2a333d'
              }
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 10
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff',
                  fontSize: 10
                }
              }
            },
            data: [
              {
                name: '北城',
                value: 0
              },
              {
                name: '溪下',
                value: 1
              },
              {
                name: '桥下',
                value: 2
              }
            ]
          }
        ]
      }

      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
